import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
// import { getToken, setToken } from '@/utils/storage'
import { getLoginApi, getUserDiaryApi } from '@/api/index.js'
Vue.use(Vuex)

// const TOKEN_KEY = 'RIJI_USER'
export default new Vuex.Store({
  state: {
    // 用户登录的账号密码
    user: {},
    // 存储当前登录用户的信息(本地token)
    // userToken: JSON.parse(window.localStorage.getToken('TOKEN_KEY'))
    // userToken: getToken(TOKEN_KEY),
    // 用户登录状态
    isLogin: false,
    // 登录用户信息
    userInfoData: {
      id: '', // 用户id
      introductions: '', // 用户简介
      email: '', // 用户邮箱
      nickname: '', // 用户昵称
      password: '', // 用户密码
      status: '', // 用户状态
      time: '' // 用户注册时间
    },
    // 用户添加日记数据
    userArticleData: {
      id: '', // 用户id
      articleid: '', // 文章id
      content: '', // 文章内容
      tilength: '', // 文章字数
      cityname: '', // 发布文章城市
      wearther: '', // 发布文章城市天气
      nowicon: '', // 发布文章城市天气图标
      temperature: '', // 发布文章城市温度
      week: '', // 星期
      time: '', // 时间
      getdate: '', // 年月日
      imgurl: {} // 用户上传图片地址
    },
    // 用户登录请求的日记数据
    userDiaryList: [],
    // 用户日记数量
    diaryNum: '',
    // 用户搜索的日记数量
    searchDiaryNum: '0',
    // 用户点击进去的日记数据
    clickDiaryList: '',
    // 点击添加按钮 / 编辑按钮 的显示
    AddbuttonShow: ''
    // 控制 日记 组件   => 搜索日记数据 和 用户日记数据 切换
    // diaryShow: ''

  },

  getters: {},

  mutations: {
    setUser (state, data) {
      state.user = data
      // state.userToken = data.token
      // 防止刷新丢失数据,把token数据储存到本地
      // window.localStorage.setToken(TOKEN_KEY, JSON.stringify(state.user))
      // setToken(TOKEN_KEY, state.userToken)
    },
    // 存储登录用户信息
    setUserInfoData (state, data) {
      state.userInfoData = data

      // 将用户id存储到日记数据的id
      state.userArticleData.id = data.id
    },

    // 更新登录用户信息事件
    updateUserData (state, data) {
      state.userInfoData = data
    },

    // 存储日记 日月/时间/星期
    setArticleTime (state, data) {
      state.userArticleData.getdate = data[0]
      state.userArticleData.week = data[1]
      state.userArticleData.time = data[2]
    },

    // 存储日记 文本/城市/天气/天气图标/温度/文本字数
    setArticleData (state, data) {
      state.userArticleData.content = data[0]
      state.userArticleData.cityname = data[1]
      state.userArticleData.wearther = data[2]
      state.userArticleData.nowicon = data[3]
      state.userArticleData.temperature = data[4]
      state.userArticleData.tilength = data[5]
    },

    // 存储日记 base64图片地址
    setArticleImg (state, data) {
      state.userArticleData.imgurl = data
    },

    // 存储用户请求的日记
    setUserDiaryList (state, data) {
      state.userDiaryList = data
      // console.log(data)
    },

    // 存储用户日记数量
    computeDiaryNum (state, data) {
      state.diaryNum = data
    },

    // 存储用户搜索日记数量
    searchDiaryNum (state, data) {
      state.searchDiaryNum = data
    },

    // 存储用户点击进去的日记数据
    clickDiaryListFn (state, data) {
      state.clickDiaryList = data
    },

    // 修改 点击添加按钮 / 编辑按钮 的显示
    setButtonShow (state, data) {
      state.AddbuttonShow = data
    }
    // 存储 控制 搜索日记组件 显示
    // setdiaryShow (state, data) {
    //   state.diaryShow = data
    // }
  },
  actions: {
    // 异步更新 用户个人信息
    async updateUserData (context, value) {
      // console.log(value)
      const { data: res } = await getLoginApi(value)
      // console.log(res.data[0])
      context.commit('updateUserData', res.data[0])
    },

    // 异步更新 用户日记
    async upUserDiaryList (context, value) {
      // const id = this.$store.state.userInfoData.id
      // console.log(id)
      const { data: res } = await getUserDiaryApi(this.state.userInfoData.id)
      // console.log(res)
      // this.userList = res.data
      context.commit('setUserDiaryList', res.data)
    }
  },
  modules: {},
  plugins: [
    // 默认 localStorage
    createPersistedState({})
  ]
})
